<script lang="jsx" setup>
import { computed, ref } from 'vue';
import { DownloadOutlined } from '@ant-design/icons-vue';
import dayjs from 'dayjs';
import downloadTableToExcel from '@/utils/downloadExcelByTable';

const commonSearchRef = ref(null);
const searchParams = ref({
  prodNo: null,
  time: null,
  isOuter: '1'
});
const searchFormList = [
  {
    type: 'input',
    key: 'prodNo',
    label: '生产型号',
    placeholder: '请输入生产型号',
    span: 24,
    md: 12,
    lg: 8,
    xl: 8,
    xxl: 6
  },
  {
    type: 'dateRangePicker',
    key: 'time',
    label: '日期',
    span: 24,
    md: 12,
    lg: 10,
    xl: 8,
    xxl: 6
  }
];

const searchData = computed(() => {
  const params = {
    ...searchParams.value
  };
  if (searchParams.value?.time?.[0]) {
    params.startTime = dayjs(searchParams.value.time[0]).format('YYYY-MM-DD');
    params.endTime = dayjs(searchParams.value.time[1]).format('YYYY-MM-DD');
  } else {
    params.startTime = null;
    params.endTime = null;
  }
  delete params.time;
  return params;
});

const tableRef = ref(null);

const column = [
  {
    key: 'dataIndex',
    dataIndex: 'dataIndex',
    title: '序号',
    width: 70,
    fixed: 'left',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'partNo',
    dataIndex: 'partNo',
    title: '生产型号',
    align: 'center',
    width: 220,
    fixed: 'left',
    checked: true,
    ellipsis: true
  },
  {
    key: 'layers',
    dataIndex: 'layers',
    title: '层别',
    align: 'center',
    width: 160,
    checked: true,
    ellipsis: true
  },
  {
    key: 'panelQty',
    dataIndex: 'panelQty',
    title: 'PNL数',
    align: 'center',
    width: 90,
    checked: true,
    ellipsis: true
  },
  {
    key: 'setQty',
    dataIndex: 'setQty',
    title: 'SET数',
    align: 'center',
    width: 90,
    checked: true,
    ellipsis: true
  },
  {
    key: 'pcsQty',
    dataIndex: 'pcsQty',
    title: 'PCS数',
    align: 'center',
    width: 90,
    checked: true,
    ellipsis: true
  },
  {
    key: 'goodPanelQty',
    dataIndex: 'goodPanelQty',
    title: '良品PNL数',
    align: 'center',
    width: 100,
    checked: true,
    ellipsis: true
  },
  {
    key: 'goodPanelRate',
    dataIndex: 'goodPanelRate',
    title: 'PNL良率',
    align: 'center',
    width: 100,
    checked: true,
    ellipsis: true,
    customRender: ({ record }) => {
      return `${Number.parseFloat(record.goodPanelRate).toFixed(2)}%`;
    }
  },
  {
    key: 'goodSetQty',
    dataIndex: 'goodSetQty',
    title: '良品SET数',
    align: 'center',
    width: 100,
    checked: true,
    ellipsis: true
  },
  {
    key: 'goodSetRate',
    dataIndex: 'goodSetRate',
    title: 'SET良率',
    align: 'center',
    width: 100,
    checked: true,
    ellipsis: true,
    customRender: ({ record }) => {
      return `${Number.parseFloat(record.goodSetRate).toFixed(2)}%`;
    }
  },
  {
    key: 'goodPcsQty',
    dataIndex: 'goodPcsQty',
    title: '良品PCS数',
    align: 'center',
    width: 100,
    checked: true,
    ellipsis: true
  },
  {
    key: 'failTotalQty',
    dataIndex: 'failTotalQty',
    title: '不良点数',
    align: 'center',
    width: 100,
    checked: true,
    ellipsis: true
  },
  {
    key: 'failSetRate',
    dataIndex: 'failSetRate',
    title: 'SET不良率',
    align: 'center',
    width: 90,
    checked: true,
    ellipsis: true,
    customRender: ({ record }) => {
      return `${Number.parseFloat(record.failSetRate).toFixed(2)}%`;
    }
  },
  {
    key: 'failPcsRate',
    dataIndex: 'failPcsRate',
    title: 'PCS不良率',
    align: 'center',
    width: 90,
    checked: true,
    ellipsis: true,
    customRender: ({ record }) => {
      return `${Number.parseFloat(record.failPcsRate).toFixed(2)}%`;
    }
  },
  {
    key: 'failPanelQty',
    dataIndex: 'failPanelQty',
    title: 'PNL不良数',
    align: 'center',
    width: 90,
    checked: true,
    ellipsis: true
  },
  {
    key: 'failSetQty',
    dataIndex: 'failSetQty',
    title: 'SET不良数',
    align: 'center',
    width: 90,
    checked: true,
    ellipsis: true
  },
  {
    key: 'failPcsQty',
    dataIndex: 'failPcsQty',
    title: 'PCS不良数',
    align: 'center',
    width: 130,
    checked: true,
    ellipsis: true
  },
  {
    key: 'bad1',
    dataIndex: 'bad1',
    title: '开路',
    align: 'center',
    width: 70,
    checked: true,
    ellipsis: true
  },
  {
    key: 'bad2',
    dataIndex: 'bad2',
    title: '短路',
    align: 'center',
    width: 70,
    checked: true,
    ellipsis: true
  },

  {
    key: 'bad3',
    dataIndex: 'bad3',
    title: '铜渣',
    align: 'center',
    width: 70,
    checked: true,
    ellipsis: true
  },

  {
    key: 'bad4',
    dataIndex: 'bad4',
    title: '蚀刻不净',
    align: 'center',
    width: 90,
    checked: true,
    ellipsis: true
  },
  {
    key: 'bad5',
    dataIndex: 'bad5',
    title: '蚀刻后损伤',
    align: 'center',
    width: 110,
    checked: true,
    ellipsis: true
  },
  {
    key: 'bad6',
    dataIndex: 'bad6',
    title: '缺口',
    align: 'center',
    width: 60,
    checked: true,
    ellipsis: true
  },
  {
    key: 'bad7',
    dataIndex: 'bad7',
    title: '凹陷',
    align: 'center',
    width: 60,
    checked: true,
    ellipsis: true
  },
  {
    key: 'bad8',
    dataIndex: 'bad8',
    title: '贴膜不良',
    align: 'center',
    width: 90,
    checked: true,
    ellipsis: true
  },
  {
    key: 'bad9',
    dataIndex: 'bad9',
    title: '干膜刮伤',
    align: 'center',
    width: 90,
    checked: true,
    ellipsis: true
  },
  {
    key: 'bad10',
    dataIndex: 'bad10',
    title: '曝光不良短路',
    align: 'center',
    width: 110,
    checked: true,
    ellipsis: true
  },
  {
    key: 'bad11',
    dataIndex: 'bad11',
    title: 'Mylar未撕净',
    align: 'center',
    width: 110,
    checked: true,
    ellipsis: true
  },
  {
    key: 'bad12',
    dataIndex: 'bad12',
    title: 'PDA残缺',
    align: 'center',
    width: 90,
    checked: true,
    ellipsis: true
  },
  {
    key: 'bad13',
    dataIndex: 'bad13',
    title: '线细',
    align: 'center',
    width: 10,
    checked: true,
    ellipsis: true
  },
  {
    key: 'bad14',
    dataIndex: 'bad14',
    title: '显影不洁',
    align: 'center',
    width: 90,
    checked: true,
    ellipsis: true
  },
  {
    key: 'bad15',
    dataIndex: 'bad15',
    title: '去膜不净',
    align: 'center',
    width: 90,
    checked: true,
    ellipsis: true
  },
  {
    key: 'bad16',
    dataIndex: 'bad16',
    title: '镀铜不均',
    align: 'center',
    width: 90,
    checked: true,
    ellipsis: true
  },
  {
    key: 'bad17',
    dataIndex: 'bad17',
    title: '胶迹',
    align: 'center',
    width: 70,
    checked: true,
    ellipsis: true
  },
  {
    key: 'bad18',
    dataIndex: 'bad18',
    title: '电镀铜颗粒',
    align: 'center',
    width: 120,
    checked: true,
    ellipsis: true
  },
  {
    key: 'bad19',
    dataIndex: 'bad19',
    title: '撞断线',
    align: 'center',
    width: 100,
    checked: true,
    ellipsis: true
  },
  {
    key: 'bad20',
    dataIndex: 'bad20',
    title: '偏孔',
    align: 'center',
    width: 70,
    checked: true,
    ellipsis: true
  },
  {
    key: 'bad21',
    dataIndex: 'bad21',
    title: '三角擦花',
    align: 'center',
    width: 90,
    checked: true,
    ellipsis: true
  },
  {
    key: 'bad22',
    dataIndex: 'bad22',
    title: '刮伤',
    align: 'center',
    width: 70,
    checked: true,
    ellipsis: true
  },
  {
    key: 'bad23',
    dataIndex: 'bad23',
    title: '其它',
    align: 'center',
    width: 70,
    checked: true,
    ellipsis: true
  },
  {
    key: 'bad24',
    dataIndex: 'bad24',
    title: '孔内毛刺',
    align: 'center',
    width: 90,
    checked: true,
    ellipsis: true
  },
  {
    key: 'startDate',
    dataIndex: 'startDate',
    title: '操作开始时间',
    align: 'center',
    width: 170,
    checked: true,
    ellipsis: true
  },
  {
    key: 'endDate',
    dataIndex: 'endDate',
    title: '操作结束时间',
    align: 'center',
    width: 170,
    checked: true,
    ellipsis: true
  }
];

function search() {
  tableRef.value.getData(1);
}

function reset() {
  nextTick(() => {
    searchParams.value.prodNo = null;
    searchParams.value.time = null;
    search();
  });
}

const pNLYield = ref(0);
const goodSetRate = ref(0);
const dataSource = ref([]);
function tableDataLoadSucess(tableData) {
  dataSource.value = tableData;
  // PNL良率
  const panelQtyTotal = tableData.reduce((acc, cur) => acc + cur.panelQty, 0);
  const goodPanelQtyTotal = tableData.reduce((acc, cur) => acc + cur.goodPanelQty, 0);
  pNLYield.value = `${Number.parseFloat((goodPanelQtyTotal / panelQtyTotal) * 100).toFixed(2)}%`;
  // SET良率
  const setQtyTotal = tableData.reduce((acc, cur) => acc + cur.setQty, 0);
  const goodSetQtyTotal = tableData.reduce((acc, cur) => acc + cur.goodSetQty, 0);
  goodSetRate.value = `${Number.parseFloat((goodSetQtyTotal / setQtyTotal) * 100).toFixed(2)}%`;
}

function exportData() {
  const ortherData = [
    {
      partNo: '总计',
      layers: '--',
      panelQty: dataSource.value.reduce((acc, cur) => acc + cur.panelQty, 0),
      setQty: dataSource.value.reduce((acc, cur) => acc + cur.setQty, 0),
      pcsQty: dataSource.value.reduce((acc, cur) => acc + cur.pcsQty, 0),
      goodPanelQty: dataSource.value.reduce((acc, cur) => acc + cur.goodPanelQty, 0),
      goodPanelRate: pNLYield.value,
      goodSetQty: dataSource.value.reduce((acc, cur) => acc + cur.goodSetQty, 0),
      goodSetRate: goodSetRate.value,
      goodPcsQty: dataSource.value.reduce((acc, cur) => acc + cur.goodPcsQty, 0),
      failTotalQty: '--',
      failSetRate: '--',
      failPcsRate: '--',
      failPanelQty: '--',
      failSetQty: dataSource.value.reduce((acc, cur) => acc + cur.failSetQty, 0),
      failPcsQty: dataSource.value.reduce((acc, cur) => acc + cur.failPcsQty, 0),
      bad1: dataSource.value.reduce((acc, cur) => acc + cur.bad1, 0),
      bad2: dataSource.value.reduce((acc, cur) => acc + cur.bad2, 0),
      bad3: dataSource.value.reduce((acc, cur) => acc + cur.bad3, 0),
      bad4: dataSource.value.reduce((acc, cur) => acc + cur.bad4, 0),
      bad5: dataSource.value.reduce((acc, cur) => acc + cur.bad5, 0),
      bad6: dataSource.value.reduce((acc, cur) => acc + cur.bad6, 0),
      bad7: dataSource.value.reduce((acc, cur) => acc + cur.bad7, 0),
      bad8: dataSource.value.reduce((acc, cur) => acc + cur.bad8, 0),
      bad9: dataSource.value.reduce((acc, cur) => acc + cur.bad9, 0),
      bad10: dataSource.value.reduce((acc, cur) => acc + cur.bad10, 0),
      bad11: dataSource.value.reduce((acc, cur) => acc + cur.bad11, 0),
      bad12: dataSource.value.reduce((acc, cur) => acc + cur.bad12, 0),
      bad13: '--',
      bad14: '--',
      bad15: '--',
      bad16: dataSource.value.reduce((acc, cur) => acc + cur.bad16, 0),
      bad17: dataSource.value.reduce((acc, cur) => acc + cur.bad17, 0),
      bad18: dataSource.value.reduce((acc, cur) => acc + cur.bad18, 0),
      bad19: dataSource.value.reduce((acc, cur) => acc + cur.bad19, 0),
      bad20: dataSource.value.reduce((acc, cur) => acc + cur.bad20, 0),
      bad21: dataSource.value.reduce((acc, cur) => acc + cur.bad21, 0),
      bad22: dataSource.value.reduce((acc, cur) => acc + cur.bad22, 0),
      bad23: dataSource.value.reduce((acc, cur) => acc + cur.bad23, 0),
      bad24: dataSource.value.reduce((acc, cur) => acc + cur.bad24, 0),
      startDate: '--',
      endDate: '--'
    }
  ];
  const data = dataSource.value.map(item => {
    return {
      ...item,
      goodPanelRate: `${Number.parseFloat(item.goodPanelRate).toFixed(2)}%`,
      goodSetRate: `${Number.parseFloat(item.goodSetRate).toFixed(2)}%`,
      failSetRate: `${Number.parseFloat(item.failSetRate).toFixed(2)}%`,
      failPcsRate: `${Number.parseFloat(item.failPcsRate).toFixed(2)}%`
    };
  });

  const mergeCellsArr = [
    {
      startCell: `A${data.length + 2}`, // 开始合并的单元格
      endCell: `B${data.length + 2}`, // 结束合并的单元格
      value: '合计' // 合并单元格的值
    }
  ];

  downloadTableToExcel({
    data,
    header: column,
    fileName: `外层良率查询${dayjs().format('YYYY-MM-DD HH:mm:ss')}导出.xlsx`,
    ortherData,
    mergeCellsArr
  });
}
</script>

<template>
  <div class="jl-main-page min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
    <CommonSearch
      ref="commonSearchRef"
      v-model:searchParams="searchParams"
      :form-list="searchFormList"
      :is-search="true"
      @search="search"
      @reset="reset"
    ></CommonSearch>

    <Table
      ref="tableRef"
      v-model:searchParams="searchData"
      :column="column"
      :show-row-selection="false"
      :auto-generate-uuid="true"
      :summary-fixed="true"
      :is-pagination="false"
      :scroll="{ y: 'auto' }"
      is-init-get-data
      url="/qms/inOutYieldRate/inOutYieldRateList"
      @table-data-load-sucess="tableDataLoadSucess"
    >
      <template #title>
        <AButton type="primary" size="small" ghost class="mini-btn mr-8px" @click="exportData">
          <template #icon>
            <DownloadOutlined />
          </template>
          <span class="ml-3px">导出</span>
        </AButton>
      </template>
      <template #summary>
        <STableSummaryRow>
          <STableSummaryCell :index="0" :col-span="2" class="text-center">总计</STableSummaryCell>
          <STableSummaryCell :index="2" class="text-center">--</STableSummaryCell>
          <STableSummaryCell :index="3" class="text-center">
            <template #default="{ total }">
              {{ total }}
            </template>
          </STableSummaryCell>
          <STableSummaryCell :index="4" class="text-center">
            <template #default="{ total }">
              {{ total }}
            </template>
          </STableSummaryCell>
          <STableSummaryCell :index="5" class="text-center">
            <template #default="{ total }">
              {{ total }}
            </template>
          </STableSummaryCell>
          <STableSummaryCell :index="6" class="text-center">
            <template #default="{ total }">
              {{ total }}
            </template>
          </STableSummaryCell>
          <STableSummaryCell :index="7" class="text-center">
            {{ pNLYield }}
          </STableSummaryCell>
          <STableSummaryCell :index="8" class="text-center">
            <template #default="{ total }">
              {{ total }}
            </template>
          </STableSummaryCell>
          <STableSummaryCell :index="9" class="text-center">
            {{ goodSetRate }}
          </STableSummaryCell>
          <STableSummaryCell :index="10" class="text-center">
            <template #default="{ total }">
              {{ total }}
            </template>
          </STableSummaryCell>
          <STableSummaryCell :index="11" class="text-center">--</STableSummaryCell>
          <STableSummaryCell :index="12" class="text-center">--</STableSummaryCell>
          <STableSummaryCell :index="13" class="text-center">--</STableSummaryCell>
          <STableSummaryCell :index="14" class="text-center">--</STableSummaryCell>
          <STableSummaryCell :index="15" class="text-center">
            <template #default="{ total }">
              {{ total }}
            </template>
          </STableSummaryCell>
          <STableSummaryCell :index="16" class="text-center">
            <template #default="{ total }">
              {{ total }}
            </template>
          </STableSummaryCell>
          <STableSummaryCell :index="17" class="text-center">
            <template #default="{ total }">
              {{ total }}
            </template>
          </STableSummaryCell>
          <STableSummaryCell :index="18" class="text-center">
            <template #default="{ total }">
              {{ total }}
            </template>
          </STableSummaryCell>
          <STableSummaryCell :index="19" class="text-center">
            <template #default="{ total }">
              {{ total }}
            </template>
          </STableSummaryCell>
          <STableSummaryCell :index="20" class="text-center">
            <template #default="{ total }">
              {{ total }}
            </template>
          </STableSummaryCell>
          <STableSummaryCell :index="21" class="text-center">
            <template #default="{ total }">
              {{ total }}
            </template>
          </STableSummaryCell>
          <STableSummaryCell :index="22" class="text-center">
            <template #default="{ total }">
              {{ total }}
            </template>
          </STableSummaryCell>
          <STableSummaryCell :index="23" class="text-center">
            <template #default="{ total }">
              {{ total }}
            </template>
          </STableSummaryCell>
          <STableSummaryCell :index="24" class="text-center">
            <template #default="{ total }">
              {{ total }}
            </template>
          </STableSummaryCell>
          <STableSummaryCell :index="25" class="text-center">
            <template #default="{ total }">
              {{ total }}
            </template>
          </STableSummaryCell>
          <STableSummaryCell :index="26" class="text-center">
            <template #default="{ total }">
              {{ total }}
            </template>
          </STableSummaryCell>
          <STableSummaryCell :index="27" class="text-center">
            <template #default="{ total }">
              {{ total }}
            </template>
          </STableSummaryCell>
          <STableSummaryCell :index="28" class="text-center">
            <template #default="{ total }">
              {{ total }}
            </template>
          </STableSummaryCell>
          <STableSummaryCell :index="29" class="text-center">--</STableSummaryCell>
          <STableSummaryCell :index="30" class="text-center">--</STableSummaryCell>
          <STableSummaryCell :index="31" class="text-center">--</STableSummaryCell>
          <STableSummaryCell :index="32" class="text-center">
            <template #default="{ total }">
              {{ total }}
            </template>
          </STableSummaryCell>
          <STableSummaryCell :index="33" class="text-center">
            <template #default="{ total }">
              {{ total }}
            </template>
          </STableSummaryCell>

          <STableSummaryCell :index="34" class="text-center">
            <template #default="{ total }">
              {{ total }}
            </template>
          </STableSummaryCell>

          <STableSummaryCell :index="35" class="text-center">
            <template #default="{ total }">
              {{ total }}
            </template>
          </STableSummaryCell>
          <STableSummaryCell :index="36" class="text-center">
            <template #default="{ total }">
              {{ total }}
            </template>
          </STableSummaryCell>

          <STableSummaryCell :index="37" class="text-center">
            <template #default="{ total }">
              {{ total }}
            </template>
          </STableSummaryCell>

          <STableSummaryCell :index="38" class="text-center">
            <template #default="{ total }">
              {{ total }}
            </template>
          </STableSummaryCell>
          <STableSummaryCell :index="39" class="text-center">
            <template #default="{ total }">
              {{ total }}
            </template>
          </STableSummaryCell>

          <STableSummaryCell :index="40" class="text-center">
            <template #default="{ total }">
              {{ total }}
            </template>
          </STableSummaryCell>
          <STableSummaryCell :index="41" class="text-center">--</STableSummaryCell>
          <STableSummaryCell :index="42" class="text-center">--</STableSummaryCell>
        </STableSummaryRow>
      </template>
    </Table>
  </div>
</template>

<style lang="scss" scoped></style>
